<template>
  <div class="six-digit-wrapper">
    <div class="wrapper-left">
      <input
        v-for="(item, index) in digits"
        :key="index"
        :ref="`ref${index}`"
        class="input"
        v-model="item.value"
        type="text"
        oninput="value=value.replace(/[^\d]/g,'')"
        @input="onInput(index, item)"
        @keyup.delete="onDelete(index)"
        maxlength="1"
      />
    </div>
    <div class="wrapper-right">
      <span>发送验证码</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      digits: [
        {
          value: '',
        },
        {
          value: '',
        },
        {
          value: '',
        },
        {
          value: '',
        },
      ],
    }
  },
  methods: {
    onInput(index, item) {
      // index < 5 ，如果是第6格，不触发光标移动至下一个输入框。
      if (this.digits[index].value && index < 3) {
        this.$refs['ref' + (index + 1)][0].focus()
        // console.log(this.codes[index].value,item.value)
      }
      if (this.digits[index].value != '') {
        this.digits[index].value = item.value.substr(item.value.length - 1, 1)
      }
      console.log(this.digits)
    },
    onDelete(index) {
      // 如果是第1格，不触发光标移动至上一个输入框
      if (index > 0) {
        this.$refs['ref' + (index - 1)][0].focus()
      }
    },
  },
}
</script>
<style lang="less" scoped>
.six-digit-wrapper {
  display: flex;
  flex-direction: row;
  .wrapper-left {
    display: flex;
    flex: 1;
    overflow: hidden;
    .input {
      display: flex;
      width: 25%;
      margin-left: 0.17066rem;
      height: 1.70666rem;
      font-size: 0.768rem;
      color: #333333;
      // background-color: #f2f2f2;
      // text-align: center;
      outline: none; // 去除选中状态边框
      border: solid 1px #d2d2d2;
      border-top: 0px;
      border-left: 0px;
      border-right: 0px;
    }
  }
  .wrapper-right {
    width: 4.26666rem;
    height: 1.70666rem;
    overflow: hidden;
    > span {
      border: 1px solid #ddd;
      padding: 0.42666rem 0.21333rem;
      font-size: 0.59733rem;
      color: #ddd;
      display: block;
      text-align: center;
      border-radius: 0.34133rem;
    }
  }
}
</style>
